<template>
	<view>
		<image :src="msg.image" style="width: 100%" mode="widthFix"></image>
		<view class="a">
			<view class="money">
				<text>￥</text>
				<text>{{ price }}</text>
				<text>起</text>
			</view>
			<view class="title">{{ msg.name }}</view>
			<view class="message">套餐描述：{{ msg.detail }}</view>
			<view class="nums">已售{{ msg.sales_num }}套</view>
		</view>
		<view class="b" @click="buyBtn">
			<view class="b1 uniFlex" v-if="!timeId">
				<view>选择</view>
				<view>请选择时间段</view>
			</view>
			<view v-else>{{ date }}</view>
		</view>
		<view class="b" v-if="!msg.goods_comment">暂无评价</view>
		<view class="b c" v-else @click="specks">
			<view class="uniBtn c1">
				<view>评价({{ msg.goods_comment_count }})</view>
				<image src="../../../static/index/a5.png" mode=""></image>
			</view>
			<view class="c2">
				<view class="c2-1 uniFlex">
					<image :src="msg.goods_comment.avatar" mode=""></image>
					<view>{{ msg.goods_comment.nickname }}</view>
				</view>
				<view class="c2-2 uniBtn">
					<view>{{ msg.goods_comment.comment }}</view>
					<!-- <image src="https://z1.ax1x.com/2023/09/14/pPRjGAf.png" mode=""></image> -->
				</view>
			</view>
		</view>

		<view class="b" v-if="msg.buyuser.length == 0">暂无购买记录</view>
		<view class="b c" v-else @click="buys">
			<view class="uniBtn c1">
				<view>购买记录</view>
				<image src="../../../static/index/a5.png" mode=""></image>
			</view>
			<view class="c3 uniBtn" v-for="(shop, index) in msg.buyuser" :key="index">
				<view class="c3-1">
					<view class="uniFlex">
						<image :src="shop.user.avatar" mode=""></image>
						<view>{{ shop.user.nickname }}</view>
					</view>
					<view class="c3-1-buy">
						已购商品：
						<text style="color: #e9a49e">x1</text>
					</view>
				</view>
				<view class="c3-2">{{ shop.pay_time }}</view>
			</view>
		</view>

		<view class="b">
			<view class="title">图文详情</view>
			<image v-for="(item, index) in msg.goods_image" :key="index" :src="item" mode="widthFix"></image>
			<!-- 	<image src="https://z1.ax1x.com/2023/09/14/pPRjGAf.png" mode="widthFix"></image>
			<image src="https://z1.ax1x.com/2023/09/14/pPRjGAf.png" mode="widthFix"></image> -->

			<rich-text :nodes="msg.content"></rich-text>
		</view>
		<view style="height: 170rpx"></view>
		<view class="base">
			<view class="uniBtn basebox">
				<view class="box" @click="goHome()">
					<image src="@/static/index/a2.png" mode=""></image>
					<view>首页</view>
				</view>
				<view class="box" @click="tabCollect()">
					<image v-if="msg.is_collect == 1" src="@/static/index/a4.png" mode=""></image>
					<image v-else src="@/static/index/a3.png" mode=""></image>
					<view>收藏</view>
				</view>
				<view class="buy" hover-class="other-button-hover" @click="buyBtn">立即购买</view>
			</view>
		</view>

		<u-popup border-radius="10" :show="popshow" mode="bottom" @close="popshow = false" closeable>
			<view class="popupmsg">
				<view class="popupbox1 uniFlex">
					<image :src="msg.image" mode=""></image>
					<view class="price">
						<text>￥</text>
						<text>{{ price }}</text>
					</view>
				</view>
				<view class="popupbox2">
					<view class="popuptitle">房间位置（{{ title }}）</view>

					<view style="margin-top: 30rpx;color: #0070D9;" class="uniFlex popuptitle" @click="show = true">
						<view>预约日期：</view>
						<view>
							<text v-if="!date">请选择</text>
							<text v-else>{{ date }}</text>
						</view>
					</view>
					<u-datetime-picker ref="datetimePicker" :show="show" :minDate="value1" mode="date" @cancel="close" @confirm="confirm"></u-datetime-picker>
					<view class="popuptime">
						<view
							v-for="(item, index) in msg.spec_value_list"
							:key="index"
							:class="{ choosetime: timeId == item.spec_value_ids }"
							@click="tabtime(item.spec_value_ids, item.sell_price)"
						>
							{{ item.spec_value_str }}
						</view>
						<!-- <view>8:00-11:00</view>
						<view>8:00-11:00</view>
						<view>8:00-11:00</view> -->
					</view>
				</view>

				<view class="other-button" hover-class="other-button-hover" @click="buyBtnPay">提交</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tid: '',
			id: '',
			title: '',

			price: '',
			msg: {
				image: '',
				is_collect: 1,
				buyuser: [],
				name: ''
			},
			popshow: false,

			show: false,
			value1: Number(new Date()),
			date: '',
			timeId: ''
		};
	},
	onLoad(options) {
		this.id = options.roomid;
		this.tid = options.tid;
		this.title = options.title;
		this.getmsg();
	},
	onReady() {},
	methods: {
		// 获取当前时间和页面传参
		getTime(value) {
			//获取时间
			var date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
			// var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			// var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			// var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			let strDate = Y + M + D;
			// console.log(strDate); //2020-05-08 17:44:56
			return strDate;
		},
		close(e) {
			this.show = false;
		},
		confirm(e) {
			// console.log(e.value);
			this.date = this.getTime(e.value);
			this.show = false;
		},
		async getmsg() {
			let res = await this.$api.fangdetail({
				id: this.tid
			});
			if (res.code == 1) {
				this.msg = res.data;
				this.price = res.data.sell_price;
			}
		},
		specks() {
			uni.navigateTo({
				url: '/pages/index/rooms/specks?id=' + this.tid + '&name=' + this.msg.name
			});
		},
		buys() {
			uni.navigateTo({
				url: '/pages/index/rooms/buys?id=' + this.tid
			});
		},
		goHome() {
			uni.reLaunch({
				url: '/pages/home/home'
			});
		},
		async tabCollect() {
			let collect = this.msg.is_collect;
			if (collect == 1) {
				collect = 0;
			} else {
				collect = 1;
			}
			// console.log(collect)
			let res = await this.$api.handleCollectgoods({
				goods_id: this.id,
				is_collect: collect
			});
			if (res.code == 1) {
				uni.showToast({
					title: '操作成功'
				});
				this.msg.is_collect = collect;
			}
		},
		buyBtn() {
			if (!uni.getStorageSync('token')) {
				uni.showModal({
					title: '温馨提示',
					content: '您还未登录，请登录后操作！',
					cancelColor: '#B3B3B3',
					confirmText: '去登录',
					confirmColor: '#E2867E',
					success: function (res) {
						if (res.confirm) {
							uni.reLaunch({
								url: '/pages/login/login'
							});
						} else if (res.cancel) {
						}
					}
				});
				return;
			}
			this.popshow = true;
			console.log('购买');
		},
		tabtime(id, price) {
			this.timeId = id;
			this.price = price;
		},
		async buyBtnPay() {
			if (!this.date) {
				uni.showToast({
					title: '请选择使用日期',
					icon: 'none'
				});
				return;
			}
			if (!this.timeId) {
				uni.showToast({
					title: '请选择使用时间段',
					icon: 'none'
				});
				return;
			}
			let goods = [{ goods_num: 1, item_id: this.timeId }];
			let params = {
				order_type: '4',
				source: '1',
				action: 'buy',
				delivery_type: '4',
				user_id: uni.getStorageSync('userid'),
				fid: this.id,
				yytime: this.date,
				goods: JSON.stringify(goods)
			};
			let res = await this.$api.placeOrder(params);
			if (res.code == 1) {
				this.pay(res.data.order_id);
			}
		},
		async pay(id) {
			uni.showLoading();
			let params = {
				from: 'order',
				pay_way: 2,
				order_id: id
			};
			let res = await this.$api.prepay(params);
			if (res.code == 1) {
				// console.log(res)
				uni.hideLoading();
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: res.data.config.timeStamp, // 时间戳（单位：秒）
					nonceStr: res.data.config.nonceStr, // 随机字符串
					package: res.data.config.package, // 固定值
					signType: res.data.config.signType, // 签名算法，这里用的 MD5/RSA 签名
					paySign: res.data.config.paySign, //签名
					success(res) {
						uni.showToast({
							title: '支付成功',
							duration: 2000
						});
						setTimeout(function () {
							uni.reLaunch({
								url: '/pages/mains/order/order?type=finish'
							});
						}, 1500);
					},
					fail(e) {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						});
						setTimeout(function () {
							uni.reLaunch({
								url: '/pages/mains/order/order?type=pay'
							});
						}, 1500);
					}
				});
			} else {
				uni.hideLoading();
			}
		}
	}
};
</script>

<style scoped lang="less">
.popupmsg {
	width: 100%;
	background: #ffffff;
	border-radius: 20rpx;

	.popupbox1 {
		margin: -50rpx 20rpx 0 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eee;
		image {
			width: 130rpx;
			height: 130rpx;
			margin-right: 25rpx;
			border-radius: 5rpx;
		}
		.price {
			padding-top: 60rpx;
			color: #aa3128;
			font-weight: bold;
			text:first-child {
				font-size: 24rpx;
			}
		}
	}
	.popupbox2 {
		padding: 40rpx 25rpx;
		border-bottom: 1px solid #eee;

		.popuptitle {
			font-size: 30rpx;
			font-weight: bold;
		}
		.popuptime {
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;

			view {
				width: 180rpx;
				height: 65rpx;
				line-height: 65rpx;
				border: 1px solid #eee;
				background: #f6f6f6;
				margin-right: 30rpx;
				margin-top: 30rpx;
				text-align: center;
				font-size: 28rpx;
				border-radius: 10rpx;
			}

			.choosetime {
				background: #fde3dc;
				border: 1px solid #aa3128;
				color: #aa3128;
			}
		}
	}
	.other-button {
		width: 530rpx;
		height: 80rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		margin: 30rpx auto;
	}
}
.a {
	margin: 20rpx;
	padding: 30rpx 20rpx;
	background: #fff;
	border-radius: 15rpx;
	background-color: #fff;
	.money {
		font-weight: bold;
		font-size: 28rpx;
		color: #aa3128;

		text {
			&:nth-child(2) {
				font-size: 48rpx;
				margin: 0 10rpx;
			}
		}
	}

	.title {
		color: #080808;
		font-size: 30rpx;
		margin: 15rpx 0;
		font-weight: bold;
	}

	.message {
		font-weight: 400;
		color: #222222;
	}

	.nums {
		font-size: 24rpx;
		color: #6f6f6f;
		margin-top: 35rpx;
	}
}
.b {
	background: #ffffff;
	margin: 20rpx;
	padding: 30rpx 20rpx;
	border-radius: 15rpx;
	.b1 {
		view:first-child {
			color: #6f6f6f;
			margin-right: 25rpx;
		}
	}
	.title {
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}
	image {
		width: 100%;
	}
}
.c {
	padding: 0;
	.c1 {
		padding: 24rpx 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		border-bottom: 1px solid #eee;

		image {
			width: 14rpx;
			height: 21rpx;
		}
	}
	.c2 {
		padding: 30rpx 20rpx;
		font-size: 24rpx;
		.c2-1 {
			image {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				margin-right: 16rpx;
			}
		}
		.c2-2 {
			line-height: 150%;
			margin-top: 10rpx;
			image {
				width: 120rpx;
				height: 120rpx;
				margin-left: 16rpx;
			}
		}
	}
	.c3 {
		padding: 30rpx 20rpx;
		font-size: 24rpx;

		.c3-1 {
			.uniFlex {
				font-size: 30rpx;
				font-weight: 400;
				image {
					width: 74rpx;
					height: 74rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}
			}
			.c3-1-buy {
				color: #6f6f6f;
				font-size: 28rpx;
				margin-top: 16rpx;
			}
		}

		.c3-2 {
			font-size: 28rpx;
			color: #6f6f6f;
		}
	}
}
.base {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 2;
	width: 100%;
	height: 170rpx;
	background-color: #fff;

	.basebox {
		padding: 25rpx 25rpx 0 44rpx;
		text-align: center;
		.box {
			color: #929292;
			font-size: 22rpx;
			margin-right: 35rpx;
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
		.buy {
			background-color: #e2867e;
			font-size: 36rpx;
			font-weight: bold;
			color: #fff;
			border-radius: 55rpx;
			padding: 20rpx 0;
			flex: 1;
		}
	}
}
</style>
